<template>
    <el-card class="box-card m-b" shadow="never" body-style="padding-top: 10px; padding-bottom: 10px;">
        <div slot="header" class="clearfix">
            <span>仓库列表</span>
        </div>
        <el-row >
            <el-table
                :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                border
                size="medium"
                style="width: 100%">
                <el-table-column prop="name" min-width="100" label="Name" fixed></el-table-column>
                <el-table-column prop="path" min-width="100" label="Path"></el-table-column>
                <el-table-column prop="revision" min-width="" label="Revision"></el-table-column>
                <el-table-column prop="groups" min-width="" label="Groups"></el-table-column>
                <el-table-column prop="upstream" min-width="" label="Upstream"></el-table-column>
            </el-table>
            <el-pagination
                style="padding-top: 10px;"
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-row>
    </el-card>
</template>
<script>
import { getHeader } from '@/app.config'

export default {
    props: {
        filters: Object,
    },
    data() {
        return {
            currentPage: 1,
            total: 0,
            tableData: [],
            pageSize: 10,
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.currentPage = 1;
                this.getData();
            },
            deep: true,
        },
    },
    methods: {
        getManifestList: function(branch, xml) {
            var source = process.env.VUE_APP_KANBAN_HOST + '/api/manifest/branchmanifest?branch='+branch+'&xml='+xml;
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.tableData = response.data.manifest_info;
                            this.total = this.tableData.length;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getData: function() {
            var branch = this.filters.branch;
            var xml = this.filters.xml;
            if (xml) {
                this.getManifestList(branch, xml);
            } 
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        }
    },
    created() {
    },
    mounted() {
        this.getData();
    }
}
</script>